import { createBehavior, createResource } from '@inbiz/core';
import { EformButton as LocaleButton } from './locale';
import {
  createInbizSchema,
  createComponentStyleSchema,
  createDecoratorStyleSchema,
  getDefalutDecoratorProps,
  createControllerSchema,
} from '@inbiz/setters';
import { getPlatform } from '@inbiz/utils';

/**
 * 1.属性的默认值:defaultProps
 * 2.属性的json数据
 * */

export const defaultProps = {
  buttontype: 'submit',
  buttonShowTyps: 'primary',
  wapButtonShowTyps: 'solid',
  buttonColorType: 'system',
  buttonBorder: 2,
  icon: {
    type: '',
    color: '#000',
    size: 14,
  },
};

export const Schema = {
  droppable: false,
  propsSchema: createInbizSchema({
    attribute: {
      base: {
        type: 'void',
        'x-component': 'CollapseItem',
        properties: {
          title: {
            type: 'object',
            'x-decorator': 'FormItem',
            'x-component': 'StatusInput',
          },
          'x-display': {
            type: 'string',
            enum: ['visible', 'hidden'],
            'x-decorator': 'FormItem',
            'x-component': 'Select',
            'x-component-props': {
              defaultValue: 'visible',
            },
          },
          // 'x-pattern': {
          //   type: 'string',
          //   enum: ['editable', 'disabled', 'readOnly'],
          //   'x-decorator': 'FormItem',
          //   'x-component': 'Select',
          //   'x-component-props': {
          //     defaultValue: 'editable',
          //   },
          // },
          'x-component-props': {
            type: 'object',
            properties: {
              buttontype: {
                type: 'string',
                enum: ['submit', 'reset', 'custom'],
                'x-decorator': 'FormItem',
                'x-component': 'Select',
                'x-reactions': {
                  target: 'form.attribute.base.title',
                  effects: ['onFieldInputValueChange'],
                  fulfill: {
                    state: {
                      value:
                        '{{{status: $target.value.status, value: "EformButton.btn." + $self.value}}}', //任意层次属性都支持表达式
                    },
                  },
                },
              },
              icon: {
                type: 'string',
                'x-decorator': 'FormItem',
                'x-component': 'IconPicker',
                'x-component-props': {
                  showColorPicker: false,
                },
              },
              buttonShowTyps: {
                type: 'string',
                enum: ['primary', 'default', 'dashed', 'text', 'link'],
                'x-decorator': 'FormItem',
                'x-component': 'Select',
                'x-component-props': {
                  defaultValue: 'primary'
                },
                platform: 'web',
              },
              wapButtonShowTyps: {
                type: 'string',
                enum: ['solid', 'outline', 'none'],
                'x-decorator': 'FormItem',
                'x-component': 'Select',
                platform: 'wap',
              },
              buttonColorType: {
                type: 'string',
                enum: ['system', 'custom'],
                'x-decorator': 'FormItem',
                'x-component': 'Radio.Group',
              },
              buttonColor: {
                type: 'string',
                'x-decorator': 'FormItem',
                'x-component': 'ColorInput',
                'x-reactions': {
                  dependencies: ['.buttonColorType'],
                  fulfill: {
                    state: {
                      hidden: "{{$deps[0] !== 'custom'}}",
                    },
                  },
                },
              },

              // buttoncolor: {
              //   type: 'string',
              //   'x-decorator': 'FormItem',
              //   'x-component': 'ColorInput',
              // },
              // textcolor: {
              //   type: 'string',
              //   'x-decorator': 'FormItem',
              //   'x-component': 'ColorInput',
              // },
            },
          },
        },
      },
    },
    style: {
      ...createComponentStyleSchema({
        // buttoncolor: {
        //   type: 'string',
        //   'x-decorator': 'FormItem',
        //   'x-component': 'ColorInput',
        //   platform: 'wap',
        // },
        // textcolor: {
        //   type: 'string',
        //   'x-decorator': 'FormItem',
        //   'x-component': 'ColorInput',
        //   platform: 'wap',

        // },
        'style.margin': {
          'x-component': 'BoxStyleSetter',
          platform: 'web',
        },
        // buttonBorder: {
        //   'x-component': 'BoxStyleSetter',
        //   'x-reactions': {
        //     dependencies: ['.buttonShowTyps', '.wapButtonShowTyps'],
        //     fulfill: {
        //       state: {
        //         hidden: "{{$deps[0] === 'link'|| $deps[1] ==='none'}}",
        //       },
        //     },
        //   },
        // },
        'style.borderRadius': {
          default: '2px 2px 2px 2px',
          'x-component': 'BoxStyleSetter',
          'x-reactions': {
            dependencies: ['..buttonShowTyps', '..wapButtonShowTyps'],
            fulfill: {
              state: {
                hidden: "{{$deps[0] === 'link'|| $deps[1] ==='none'}}",
              },
            },
          },
        },
      }),
      ...createDecoratorStyleSchema(),
    },
    // senior: {
    //   ...createModelSchema(),
    //   ...createSoureSchema(),
    // },
    controller:createControllerSchema({
      events: [
      {
        name: "onClick",
        label: "点击"
      },
    ],
    })
  }),
};

export const Behavior = createBehavior({
  extends: ['Field'],
  name: 'EformButton',
  selector: (node) => node.props?.['x-component'] === 'EformButton',
  designerLocales: LocaleButton,
  designerProps: Schema,
});

export const Resource = createResource({
  icon: 'Button',
  elements: [
    {
      componentName: 'Field',
      props: {
        title: {
          status: true,
          value: 'EformButton.sumbiltTitle',
        },
        type: 'string',
        'x-decorator': 'Container',
        'x-component': 'EformButton',
        'x-component-props': defaultProps,
        'x-decorator-props': getDefalutDecoratorProps(getPlatform(), { border: false }, { margin: '0px 0px 22px 0px' }),
      },
    },
  ],
});
